interface DefaultConfig {
  color: string[]
  title: {
    textStyle: {
      color: string
      fontSize: number
    }
    left: string
  }
}

interface ChartOptions {
  title?:
    | boolean
    | {
        text?: string
        color?: string
        position?: 'left' | 'center' | 'right'
      }
  data: any[]
  xAxis?: {
    name?: string
    nameTextStyle?: {
      color?: string
    }
  }
  yAxis?: {
    name?: string
    nameTextStyle?: {
      color?: string
    }
  }
  position?: {
    left?: string | number
    top?: string | number
    right?: string | number
    bottom?: string | number
  }
  radius?: string | string[]
  customOption?: Record<string, any>
}

class EChartsWrapper {
  private defaultConfig: DefaultConfig = {
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
    title: {
      textStyle: {
        color: '#333',
        fontSize: 16,
      },
      left: 'center',
    },
  }

  // 深度合并对象
  private deepMerge(target: any, source: any): any {
    if (!source) return target
    const result = { ...target }

    Object.keys(source).forEach((key) => {
      if (source[key] instanceof Object && key in target) {
        result[key] = this.deepMerge(target[key], source[key])
      } else {
        result[key] = source[key]
      }
    })

    return result
  }

  private handleTitle(titleConfig: ChartOptions['title'], defaultTitle: string) {
    if (!titleConfig) return {}
    if (titleConfig === true) {
      return {
        ...this.defaultConfig.title,
        text: defaultTitle,
      }
    }
    return {
      ...this.defaultConfig.title,
      text: (titleConfig as any).text || defaultTitle,
      textStyle: {
        ...this.defaultConfig.title.textStyle,
        color: (titleConfig as any).color || this.defaultConfig.title.textStyle.color,
      },
      left: (titleConfig as any).position || this.defaultConfig.title.left,
    }
  }

  // 柱状图配置
  public getBarOption(options: ChartOptions) {
    const { data, title, xAxis, yAxis, customOption } = options
    const defaultOption = {
      color: this.defaultConfig.color,
      title: this.handleTitle(title, '柱状图'),
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: data.map((item) => item.name),
        name: xAxis?.name,
        nameTextStyle: {
          color: xAxis?.nameTextStyle?.color || '#333',
        },
      },
      yAxis: {
        type: 'value',
        name: yAxis?.name,
        nameTextStyle: {
          color: yAxis?.nameTextStyle?.color || '#333',
        },
      },
      series: [
        {
          type: 'bar',
          data: data.map((item) => item.value),
        },
      ],
    }

    // 合并自定义配置
    return this.deepMerge(defaultOption, customOption)
  }

  // 饼图配置
  public getPieOption(options: ChartOptions) {
    const { data, title, position, radius = '50%', customOption } = options
    const defaultOption = {
      color: this.defaultConfig.color,
      title: this.handleTitle(title, '饼图'),
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          type: 'pie',
          radius,
          data,
          ...position,
        },
      ],
    }

    // 合并自定义配置
    return this.deepMerge(defaultOption, customOption)
  }
}

export default EChartsWrapper
